<template>
  <div id="myChartG" :style="{ width: '100%', height: '300px' }"></div>
</template>
 
<script setup>
import { EcartsG } from "@/api/indexHome";

import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
const erd = elementResizeDetectorMaker();
let myChart;
const initMyChart = () => {
  myChart = echarts.init(document.getElementById("myChartG"));
};

import {
  reactive,
  getCurrentInstance,
  onMounted,
  inject,
  computed,
  toRaw,
} from "vue";

const parentDataG = inject("parentDataG");

/// 声明定义一下echart
let echart = echarts;
watch(
  () => parentDataG.value.staFalsG,
  (newValue) => {
    EcartsAPOT(parentDataG.value);
  },
  { deep: true }
);

onMounted(async () => {
  await nextTick();
  initMyChart();
  erd.listenTo(document.getElementById("myChartG"), function () {
    myChart.resize();
  });
});
function EcartsAPOT(obj) {
  EcartsG({
    state: obj.state,
    wareId: obj.wareId,
    productId: obj.productId,
  }).then((res) => {
    let ArrayProduF = [];
    if (obj.state == 0) {
      ArrayProduF = res.data.wareProductDayNum;
    } else {
      ArrayProduF = res.data.wareProductMonthNum;
    }
    let ProdutimeF = [],
      expectedProduF = [],
      actualProduF = [];
    if (res.status == 200) {
      if (obj.state == 0) {
        for (let i = 0; i < ArrayProduF.length; i++) {
          ProdutimeF.push(ArrayProduF[i].dayTime);
          expectedProduF.push(ArrayProduF[i].dayNumber);
          actualProduF.push(ArrayProduF[i].dayChangeNumber);
        }
      } else {
        for (let i = 0; i < ArrayProduF.length; i++) {
          ProdutimeF.push(ArrayProduF[i].yearMonth);
          expectedProduF.push(ArrayProduF[i].monthNumber);
          actualProduF.push(ArrayProduF[i].monthChangeNumber);
        }
      }
      initChart(ProdutimeF, expectedProduF, actualProduF, obj.state);
    }
  });
}
onUnmounted(() => {
  erd.uninstall(document.getElementById("myChartG"));
});
const day = new Date().getDate();
// 基础配置一下Echarts
function initChart(days, expectedData, actualData, dayState) {
  let statime = 0;
  let tdats = 0;
  if (dayState == 0) {
    if (day > 7) {
      statime = day - 7;
      tdats = day;
    } else {
      tdats = day;
    }
    if (day == days.length) {
    } else {
      expectedData.splice(day, expectedData.length);
      actualData.splice(day, actualData.length);
      days.splice(day, days.length);
    }
  } else if (dayState == 1) {
    statime = days.length - 5;
    tdats = days.length;
  }
  // 把配置和数据放这里
  myChart.setOption({
    legend: {
      data: ["销售商品（件）", "兑换商品（件）"],
    },

    xAxis: {
      type: "category",
      data: days,
      axisTick: {
        alignWithLabel: true,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
      padding: [5, 10],
    },
    dataZoom: [
      {
        type: "inside", // 内嵌入图标中
        startValue: statime, // 用绝对值的方式定义了窗口数据默认展示的数据开始范围
        endValue: tdats, // 用绝对值的方式定义了窗口数据默认展示的数据终止范围
        filterMode: "filter",
        /**
            不指定时，当 dataZoom-slider.orient 为 'horizontal'时，
            默认控制和 dataZoom 平行的第一个 xAxis。但是不建议使用默认值，建议显式指定。
            如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。
            */
        xAxisIndex: [0],
      },
    ],
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "销售商品（件）",
        type: "bar",
        data: expectedData,
        smooth: true,
      },
      {
        name: "兑换商品（件）",
        type: "bar",
        data: actualData,
      },
    ],
  });
}
</script>